////
/// @group segmented-button
////

@use "sass:map";
@use "sass:color";
@use "../utils";
@use "../spacing";
@use "../icon/icon";
@use "../interaction/interaction";
@use "../typography/typography";
@use "../transition/transition";
@use "../theme/a11y";
@use "../theme/colors";
@use "../theme/theme";

/// Set to `true` to disable all the styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable the styles to display an icon while selected
/// @type Boolean
$disable-selected-icon: false !default;

/// The light theme text color
/// @type Color
$light-theme-color: colors.$black !default;

/// The light theme outline color
/// @type Color
$light-theme-outline-color: #79747e !default;

/// The light theme background color while selected
/// @type Color
$light-theme-selected-background-color: theme.get-swatch(
  theme.$secondary-color,
  700,
  false,
  color.adjust(theme.$secondary-color, $lightness: -20%)
) !default;

/// The light theme text color while selected
/// @type Color
$light-theme-selected-color: a11y.contrast-color(
  $light-theme-selected-background-color
) !default;

/// The dark theme text color
/// @type Color
$dark-theme-color: colors.$white !default;

/// The dark theme outline color
/// @type Color
$dark-theme-outline-color: #938f99 !default;

/// The dark theme background color while selected
/// @type Color
$dark-theme-selected-background-color: theme.get-swatch(
  theme.$secondary-color,
  300,
  false,
  color.adjust(theme.$secondary-color, $lightness: 20%)
) !default;

/// The dark theme text color while selected
/// @type Color
$dark-theme-selected-color: a11y.contrast-color(
  $dark-theme-selected-background-color
) !default;

/// The default gap to apply between the elements in the `SegmentedButton`.
/// @type Number
$gap: spacing.get-var(sm) !default;

/// The default border-radius to apply `SegmentedButton` that appear at the
/// edges.
/// @type Number
$border-radius: 2.5rem !default;

/// The default min-height for a `SegmentedButton`.
/// @type Number
$min-height: 2.5rem !default;

/// The default min-width for a `SegmentedButton`.
/// @type Number
$min-width: 3rem !default;

/// The default horizontal padding for a `SegmentedButton`.
/// @type Number
$horizontal-padding: calc(spacing.get-var(sm) * 1.5) !default;

/// The default vertical padding for a `SegmentedButton`.
/// @type Number
$vertical-padding: spacing.get-var(none) !default;

/// The default outline width for a `SegmentedButton`.
/// @type Number
$outline-width: 0.0625rem !default;

/// The default outline color.
/// @type Color
$outline-color: theme.get-default-color(
  $light-theme-outline-color,
  $dark-theme-outline-color
) !default;

/// The default text color
/// @type Color
$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;

/// The default selected text color
/// @type Color
$selected-color: theme.get-default-color(
  $light-theme-selected-color,
  $dark-theme-selected-color
) !default;

/// The default selected background-color
/// @type Color
$selected-background-color: theme.get-default-color(
  $light-theme-selected-background-color,
  $dark-theme-selected-background-color
) !default;

/// The default typography styles.
/// @type Map
$typography-styles: typography.$button-styles !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (
  border-radius,
  min-height,
  min-width,
  outline-width,
  outline-color,
  color,
  selected-background-color,
  selected-color
);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "segmented-button");
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  #{$property}: get-var($name, $fallback);
}

/// Applies the light the variables based on feature flags
@mixin use-light-theme {
  @if not $disable-everything {
    @if $light-theme-outline-color != $dark-theme-outline-color {
      @include set-var(outline-color, $light-theme-outline-color);
    }

    @if $light-theme-selected-background-color !=
      $dark-theme-selected-background-color
    {
      @include set-var(
        selected-background-color,
        $light-theme-selected-background-color
      );
    }

    @if $light-theme-selected-color != $dark-theme-selected-color {
      @include set-var(selected-color, $light-theme-selected-color);
    }
  }
}

/// Applies the dark the variables based on feature flags
@mixin use-dark-theme {
  @if not $disable-everything {
    @if $light-theme-outline-color != $dark-theme-outline-color {
      @include set-var(outline-color, $dark-theme-outline-color);
    }

    @if $light-theme-selected-background-color !=
      $dark-theme-selected-background-color
    {
      @include set-var(
        selected-background-color,
        $dark-theme-selected-background-color
      );
    }

    @if $light-theme-selected-color != $dark-theme-selected-color {
      @include set-var(selected-color, $dark-theme-selected-color);
    }
  }
}

/// Conditionally applies the css variables based on feature flags
@mixin variables {
  @if not $disable-everything {
    @include set-var(border-radius, $border-radius);
    @include set-var(outline-width, $outline-width);
    @include set-var(outline-color, $outline-color);
    @include set-var(color, currentcolor);
    @include set-var(selected-background-color, $selected-background-color);
    @include set-var(selected-color, $selected-color);
  }
}

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(segmented-button, $disable-layer) {
      .rmd-segmented-button-container {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;

        &--full-width {
          width: 100%;
        }
      }

      .rmd-segmented-button {
        @include theme.theme-use-var(color, text-primary-color);
        @include icon.set-var(color, currentcolor);
        @include icon.set-var(size, 1.125rem);
        @include utils.map-to-styles($typography-styles);
        @include use-var(min-height, $fallback: $min-height);
        @include use-var(min-width, $fallback: $min-width);

        align-items: center;
        background-color: transparent;
        border: 0;
        box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
        display: inline-flex;
        gap: $gap;
        justify-content: center;
        padding: $vertical-padding $horizontal-padding;

        &:first-child {
          @include use-var(border-bottom-left-radius, border-radius);
          @include use-var(border-top-left-radius, border-radius);

          @include utils.rtl {
            @include use-var(border-bottom-right-radius, border-radius);
            @include use-var(border-top-right-radius, border-radius);

            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }
        }

        &:last-child {
          @include use-var(border-bottom-right-radius, border-radius);
          @include use-var(border-top-right-radius, border-radius);

          @include utils.rtl {
            @include use-var(border-bottom-left-radius, border-radius);
            @include use-var(border-top-left-radius, border-radius);

            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }

        &--selected {
          @if not $disable-selected-icon {
            @include transition.transition-set-var(
              max-width,
              icon.get-var(size)
            );
          }
          @include use-var(background-color, selected-background-color);
          @include use-var(color, selected-color);
        }
      }
    }
  }
}
